<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>回调ref中回调执行次数的问题</title>
	</head>
	<body>
		<div id="test"></div>
		<!-- 引入核心库 -->
		<script src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用于将jsx转为js -->
		<script src="../js/babel.min.js"></script>

		<script type="text/babel">
			// 创建组件
			class Demo extends React.Component {
				state = { isHot: false };

				showLeftData = () => {
					const { input1 } = this;
					console.log(this);
					alert(input1.value);
				};

				/*
                    回调函数形式的ref：
                        更新过程中，回调函数会执行两次
                        第一次：传入的参数为null
                        第二次：传入的参数为真实DOM元素
                        原因：每次渲染时会创建一个新的函数实例，所以React清空旧的ref并设置新的ref
                        解决：将ref的回调函数定义为class的绑定函数的方式可避免上述问题，但大多数情况下都无关紧要
                */
				saveInput1 = (c) => {
					this.input1 = c;
					console.log("@", c);
				};

				changeWeather = () => {
					// 获取原来的状态
					const { isHot } = this.state;
					// 更新状态
					this.setState({ isHot: !isHot });
				};

				render() {
					const { isHot } = this.state;
					return (
						<div>
							<h2>今天天气很{isHot ? "炎热" : "凉爽"}</h2>
							<input ref={this.saveInput1} type="text" placeholder="点击按钮提示数据" />
							&nbsp;
							<button onClick={this.showLeftData}>点我提示左侧输入信息</button>&nbsp;
							<button onClick={this.changeWeather}>点我切换天气</button>
						</div>
					);
				}
			}
			// 渲染组件到页面
			ReactDOM.render(<Demo />, document.getElementById("test"));
		</script>
	</body>
</html>
